<!-- pages/login/index.vue -->
<script setup>
	import { computed, ref } from 'vue';
	import customPassword from './components/password.vue'
	import customMobile from './components/mobile.vue'
	// 标签页要展示的内容
	const tabMetas = [
	  { title: '密码登录', subTitle: '验证码登录' },
	  { title: '验证码登录', subTitle: '密码登录' }
	]
	
	// 定义索引值
	const activeIndex = ref(0)
	// 通过计算属性获取当前下标的数组
	const currentObj = computed(() => tabMetas[activeIndex.value])
	
	// 点击切换
	const onChange = () => {
		// 通过绝对值来让值为1或0
		activeIndex.value = Math.abs(activeIndex.value - 1)
	}
	
</script>

<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{currentObj.title}}</view>
      <view class="type">
        <text @click="onChange">{{currentObj.subTitle}}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
	<!-- 使用组件 -->
	<custom-password v-if="activeIndex === 0"></custom-password>
	<custom-mobile v-else></custom-mobile>
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>